<template>
  <a-modal
    title="批量编辑"
    :visible="visible"
    :confirm-loading="loading"
    @ok="() => { $emit('ok', {[selectField]: inputNewValue}) }"
    @cancel="() => { $emit('cancel', {[selectField]: inputNewValue}) }"
  >
    <div>
      字段：
      <a-select v-model="selectField" style="width: 120px; margin-left: 20px">
        <a-select-option v-for="field in filterFields" :value="field.name" :key="field.name">
          {{ field.alia }}
        </a-select-option>
      </a-select>
    </div>
    <div style="margin-top: 20px">
      修改为：
      <a-input v-model="inputNewValue" placeholder="请填写修改数据" style="width: 350px"/>
    </div>
  </a-modal>
</template>

<script>
  export default {
    name: 'EditModal',
    props: {
      visible: {
        type: Boolean,
        required: true
      },
      loading: {
        type: Boolean,
        default: () => false
      },
      fields: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        inputNewValue: '',
        selectField: ''
      }
    },
    methods: {
    },
    computed: {
      filterFields () {
        return this.fields.filter(value => value.name !== 'sortField' && value.name !== 'featureIndex')
      }
    },
    created () {
      // 当 fields 发生改变时，为表单设置值
      this.$watch('fields', () => {
        if (this.fields.length > 0) {
          this.selectField = this.fields[0].name;
          if (this.fields[0].name === 'sortField' && this.fields.length > 1) {
            this.selectField = this.fields[1].name;
            if (this.fields[1].name === 'featureIndex' && this.fields.length > 2) {
              this.selectField = this.fields[2].name;
            }
          }
        }
      })
    }
  }
</script>

<style scoped>

</style>
